<!DOCTYPE html>
<!--
honghiepcao@gmail.com
-->
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <script>
            function HappyLightBox(){
                this.close = function(){
                    var lightOverlay = document.getElementById('fullhappy_light_box_light');
                    var fadeOverlay = document.getElementById('fullhappy_light_box_fade');
                    if (lightOverlay != null && fadeOverlay != null) {
                        lightOverlay.parentNode.removeChild(lightOverlay);
                        fadeOverlay.parentNode.removeChild(fadeOverlay);
                    }
                };
                this.openContentIframe = function(src, width, height){
                    var iframe = document.createElement('iframe');
                    iframe.style.width = width+'px';
                    iframe.style.height = height+'px';
                    iframe.style.border = 'none';
                    iframe.src= src;
                    this.openContentChildNode(iframe);
                }
                this.openContentChildNode = function(childNode){
                    var fadeOverlay= document.createElement('div');
                    var lightOverlay= document.createElement('div');
                    var closeLightBoxButton = document.createElement('div');
                    fadeOverlay.setAttribute('id','fullhappy_light_box_fade');
                    /*fadeOverlayDiv.setAttribute('class','fullhappy_light_box_fade');*/
                    fadeOverlay.setAttribute('style','position: fixed;'
                        +'top: 0%;'
                        +'left: 0%;'
                        +'width: 100%;'
                        +'height: 100%;'
                        +'background-color: #777777;'
                        +'z-index: 1001;'
                        +'-moz-opacity: 0.8;'
                        +'opacity: .80;'
                        +'filter: alpha(opacity = 80);');
               
                    lightOverlay.setAttribute('id','fullhappy_light_box_light');
                    //lightOverlayDiv.setAttribute('class','fullhappy_light_box_light');
                    lightOverlay.setAttribute('style','position: absolute;'
                        +'box-shadow:0 0 20px #000000;'
                        +'width: 400px;'
                        +'height: 200px;'
                        +'padding: 16px;'
                        +'background-color: white;'
                        +'z-index: 1002;'                                                                                      
                        +'border-radius: 4px;');
               
                    closeLightBoxButton.setAttribute('id', 'fulhappy_light_box_close_box_button');
                    //closeLightBoxButton.setAttribute('class', 'fulhappy_light_box_close_box_button');
                    closeLightBoxButton.setAttribute('style', 'background-color: #0C0C0C;'
                        +'border: 2px solid #FFFFFF;'
                        +'border-radius: 10px;'
                        +'box-shadow: 0 0 6px #000000;'
                        +'color: #FFFFFF;'
                        +'cursor: pointer;'
                        +'font-size: 11px;'
                        +'height: 16px;'
                        +'position: absolute;'
                        +'right: -8px;'
                        +'text-align: center;'
                        +'top: -8px;'
                        +'width: 16px;');

                    closeLightBoxButton.appendChild(document.createTextNode('x'));
                    closeLightBoxButton.addEventListener('click', this.close, true);
                    var body = document.getElementsByTagName('body')[0];
                    body.appendChild(fadeOverlay);
               
                    lightOverlay.appendChild(closeLightBoxButton);
                    lightOverlay.appendChild(childNode);
                    body.appendChild(lightOverlay);
               
               
                    var maxHeight = fadeOverlay.offsetHeight;
                    var maxWidth = fadeOverlay.offsetWidth;
                    lightOverlay.style.height = childNode.clientHeight + 'px';
                    lightOverlay.style.width = childNode.clientWidth + 'px';
                    //light box display in center  ->  lightOverlayTop = (maxHeight - lightOverlay.offsetHeight)/2
                    //or light box display in center top  -> lightOverlayTop = 10;
                    var lightOverlayTop = (maxHeight > (lightOverlay.offsetHeight+10))?(maxHeight - lightOverlay.offsetHeight)/2:10;
                    var lightOverlayLeft = (maxWidth > (lightOverlay.offsetWidth+10))?(maxWidth - lightOverlay.offsetWidth) / 2:10;
                    lightOverlay.style.top = lightOverlayTop+ 'px';
                    lightOverlay.style.left = lightOverlayLeft + 'px';
                           
               
                };
       
            }
        </script>
    </head>
    <body>
        <script>
            var lightBox = new HappyLightBox();            
            lightBox.openContentIframe('http://www.w3schools.com',300,200);
               
        </script>
        <p>
        
<script language="javascript">
var now = new Date();
var offset = now.getTimezoneOffset();
document.write(offset);
</script>
            To display a lightbox click <a
                href="javascript:(new HappyLightBox()).openContentIframe('http://www.w3schools.com',300,200);" >here</a>
        </p>


    </body>
</html>
